<script lang="ts" setup>
	import { reactive, ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	let router = useRouter()
	const userStoreInfo = userStore();
	const userRole = ref(userStoreInfo.getUserFlag)
	const userInfo = ref(userStoreInfo.getUserInfo)
	const {
		proxy,
	} = getCurrentInstance()
	onLoad(() => {
		console.log(userStoreInfo.userInfo);
		inputValue.value = userStoreInfo.userInfo.nickname ? userStoreInfo.userInfo.nickname : ''
		avaValue.value = userStoreInfo.userInfo.avatar ? userStoreInfo.userInfo.avatar : ''
		sexValue.value = userStoreInfo.userInfo.sex == 1 ? '男' : userStoreInfo.userInfo.sex == 2 ? '女' : '未知'
		timeValue.value = userStoreInfo.userInfo.birthday ? userStoreInfo.userInfo.birthday : ''
	})
	let datetimeShow = ref(false);
	let datetime = ref('')
	let pickerShow = ref(false)
	let sexList = ref([['男', '女']])
	let inputValue = ref('')
	let sexValue = ref()
	let timeValue = ref()
	let avaValue = ref()
	let timeConfirm = (e) => {
		console.log(e);
		timeValue.value = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
		datetimeShow.value = false
		editInfo()
	}
	let sexConfirm = (e) => {
		console.log(e);
		sexValue.value = e.value[0]
		pickerShow.value = false
		editInfo()
	}
	let avatarClick = () => {
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				console.log(tempFilePaths);
				uni.uploadFile({
					url: proxy.$uploadUrl + proxy.$api.uploadFile,
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {
						file: tempFilePaths[0],
					},
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data));
						if (JSON.parse(uploadFileRes.data).success) {
							avaValue.value = JSON.parse(uploadFileRes.data).result
							editInfo()
						}
					}
				});
			}
		});
	}
	const inputChange = (e) => {
		console.log(inputValue.value);
		editInfo()
	}
	const editInfo = () => {
		proxy.$req('PUT', proxy.$api.editUserInfo, {
			id: userStoreInfo.userInfo.id,
			avatar: avaValue.value,
			birthday: timeValue.value,
			nickname: inputValue.value,
			sex: sexValue.value == '男' ? 1 : sexValue.value == '女' ? 2 : 0
		}).then((res) => {
			console.log(res);
			if (res.success) {
				userStoreInfo.updateUserInfo(userStoreInfo.userInfo.id)
			}
		})
	}
</script>
<template>
	<u-navbar class="navbar" bgColor="rgba(255, 255, 255, 0)" :placeholder="true" title="" :autoBack="true">
		<template #center>
			<view style="font-weight: 600;font-size: 36rpx;">设置</view>
		</template>
	</u-navbar>
	<view class="avatar" @click="avatarClick">
		<image :src="avaValue" v-if="avaValue" mode=""></image>
		<image src="../../../static/logo.png" v-else mode=""></image>
		<text class="editTitle">更换头像</text>
	</view>
	<view class="main">
		<view class="function">
			<text class="title">昵称</text>
			<view class="funcItem">
				<input type="text" v-model="inputValue" style="text-align: right;" @confirm="inputChange">
				<!-- <u-icon name="arrow-right"></u-icon> -->
			</view>
		</view>
		<view class="function" @click="pickerShow=true">
			<text class="title">性别</text>
			<view class="funcItem">
				<text>{{ sexValue }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="function" @click="datetimeShow=true">
			<text class="title">出生日期</text>
			<view class="funcItem">
				<text>{{ timeValue }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
	<u-datetime-picker :show="datetimeShow" v-model="datetime" mode="date" :minDate="14539098"
		@cancel="datetimeShow=false" @confirm="timeConfirm"></u-datetime-picker>
	<u-picker :show="pickerShow" :columns="sexList" @cancel="pickerShow=false" @confirm="sexConfirm"></u-picker>
</template>
<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.main {
		background-color: #FFFFFF;
		width: 686rpx;
		height: 340rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		margin: 0 auto;
		padding: 5rpx 0;
		box-sizing: border-box;
	}

	.function {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			font-size: 32rpx;
			font-weight: 600;
		}

		.funcItem {
			display: flex;
			align-items: center;

			text {
				margin-right: 10rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}
		}
	}

	.avatar {
		// width: calc(100% - 60rpx);
		padding: 30rpx 30rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.editTitle {
			margin-top: 10rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}

		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 100rpx;
		}
	}
</style>